<template>
  <div :id="id">
    <mavon-editor :toolbars="settings.toolbars" class="me-editor"
                  :ishljs="settings.ishljs"
                  :editable="settings.editable"
                  :codeStyle="settings.codeStyle"
                  :toolbarsFlag="settings.toolbarsFlag"
                  :navigation="settings.navigation"
                  :defaultOpen="settings.defaultOpen"
                  :fontSize="settings.fontSize"
                  :boxShadow="settings.boxShadow"
                  v-model="value"
                  :placeholder="settings.placeholder"
                  :shortCut="settings.shortCut"
                  :autofocus="settings.autofocus"
                  :language="settings.language"
                  @imgAdd="mavonImgAdd"
                  @change="contentChange"></mavon-editor>
  </div>
</template>

<script>

import Vue from 'vue'
import mavonEditor from 'mavon-editor';

Vue.use(mavonEditor);

import 'mavon-editor/dist/css/index.css';

import defaultOptions from '@/components/markdown/default-options'

export default {
  name: 'CustomMavonEditor',
  props: {
    id: {
      type: String,
      required: false,
      default() {
        return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
      }
    },
    options: {
      type: Object,
      default() {
        return defaultOptions
      }
    },
    content: { // 默认值
      type: String,
      default: ''
    },
    // defaultOpen: { // 默认值
    //   type: String,
    //   default: 'edit'
    // },
    // editable: { // 是否允许编辑
    //   type: Boolean,
    //   default: true
    // },
    // codeStyle: { //markdown样式： 默认github
    //   type: String,
    //   default: 'code-github'
    // },
    // placeholder: { //输入框为空时默认提示文本
    //   type: String,
    //   default: '请输入内容...'
    // },
    // toolbarsFlag: { // 工具栏是否显示
    //   type: Boolean,
    //   default: true
    // },
    // navigation: { // 默认展示目录
    //   type: Boolean,
    //   default: false
    // },
    // language: {
    //   type: String,
    //   required: false,
    //   default: 'zh-CN' // zh-CN / en
    // }
  },
  data() {
    return {
      settings: {},
      value: ''
    }
  },
  mounted() {
    this.settings = Object.assign({}, defaultOptions, this.options)
  },
  watch: {
    'content': function (val) {
      this.value = val == null ? '' : val
    }
  },
  methods: {
    mavonImgAdd(pos, $file) {
      this.$message.error('暂不支持文件上传...')
      return false;
    },
    contentChange(value, render) {
      this.$emit('change', value, render);
    }
  }
}
</script>
<style scoped>
.me-editor {
  z-index: 6 !important; /* 层级太高会覆盖其它样式 */
  width: 100%;
  height: 100%;
}
</style>
